<template>
   <div id="rights">
     <div class="rights-title">普通会员尊享权益</div>
     <ul class="rights-list">
      <li>
        <div>
          <i class="iconfont icon-xingqiu"></i>
        </div>
        <div>甄选全球好物</div>
        <div>品质把控</div>
      </li>
      <li>
        <div>
          <i class="iconfont icon-xingqiu"></i>
        </div>
        <div>甄选全球好</div>
        <div>品质把控</div>
      </li>
      <li>
        <div>
          <i class="iconfont icon-xingqiu"></i>
        </div>
        <div>甄选全球好</div>
        <div>品质把控</div>
      </li>
      <li>
        <div>
          <i class="iconfont icon-xingqiu"></i>
        </div>
        <div>甄选全球好</div>
        <div>品质把控</div>
      </li>
      <li>
        <div>
          <i class="iconfont icon-xingqiu"></i>
        </div>
        <div>甄选全球好</div>
        <div>品质把控</div>
      </li>
      <li>
        <div>
          <i class="iconfont icon-xingqiu"></i>
        </div>
        <div>甄选全球好</div>
        <div>品质把控</div>
      </li>
      <li>
        <div>
          <i class="iconfont icon-xingqiu"></i>
        </div>
        <div>甄选全球好物</div>
        <div>品质把控</div>
      </li>
     </ul>
   </div>
</template>
<script>
export default {
   name: 'MemberRights',
   components: {
     
   },
   mixins: [],
   props: {
     
   },
   data() {
     return {
       
     }
   }
};
</script>
<style lang='less' scoped>
  #rights{
    width: 32.5rem;
    height: 19rem;
    background-color: rgb(218, 218, 153);
    margin-left: 1rem;
    border-radius: 1rem;
    margin-top: -12rem;
    padding: 1.5rem;
    .rights-title{
      font-size: 1.8rem;
      font-weight: bold;
      margin-bottom: 1rem;
    }
    .rights-list{
      display: flex;
      flex-wrap: wrap;
      height: 16rem;
      justify-content: left;
      align-content: space-between;
      li{
        width: 8rem;
        text-align: center;
        div{
          &:nth-child(1){
            width: 3rem;
            height: 3rem;
            background-color: black;
            text-align: center;
            color: skyblue;
            transform: rotate(45deg);
            margin: 0 auto;
            border-radius: 0.2rem;
          }
          &:nth-child(2){
              font-size: 1.3rem;
              margin-top: 1rem;
            }
          &:nth-child(3){
            font-size: 1rem;
            color: gray;
          }
        }
      }
    }
  }
</style>